<template>
  <s-form-item
    size="custom"
    :options="{ labelWidth: 8, wrapperWidth: 16, offsetWidth: 0, total: 24 }"
    label="必填"
    name="required"
    :rules="[{ whitespace: true, required: true, message: '不能为空' }]"
  >
    <s-radio
      v-model="formValue.required"
      :data="[
        { label: '是', value: '1' },
        { label: '否', value: '0' }
      ]"
    />
  </s-form-item>
  <s-form-item
    size="custom"
    :options="{ labelWidth: 8, wrapperWidth: 16, offsetWidth: 0, total: 24 }"
    label="最小长度"
    name="min"
  >
    <s-input-number v-model="formValue.min" placeholder="最小长度" />
  </s-form-item>
  <s-form-item
    size="custom"
    :options="{ labelWidth: 8, wrapperWidth: 16, offsetWidth: 0, total: 24 }"
    label="最大长度"
    name="max"
  >
    <s-input-number v-model="formValue.max" placeholder="最大长度" />
  </s-form-item>
  <s-form-item
    size="custom"
    :options="{ labelWidth: 8, wrapperWidth: 16, offsetWidth: 0, total: 24 }"
    label="正则校验"
    name="pattern"
  >
    <s-input v-model="formValue.pattern" allow-clear placeholder="正则校验表达式" />
  </s-form-item>
</template>
<script>
export default {
  name: 'ValidatorProperty',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      required: false,
      type: Object,
      default: () => {}
    },
    code: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data() {
    return { formValue: this.value.properties }
  },
  watch: {
    value: {
      handler: function (val, oldVal) {
        this.formValue = val.properties
      },
      deep: true
    }
  }
}
</script>
